<template>
    <view class="commentitem">
        <view class="header" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view>
                <uv-avatar size="22"
                    src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/%E9%97%A8%E5%BA%97%403x.png"
                    shape="square"></uv-avatar>
            </view>
            <view class="header_right">
                <view class="top">
                    <view class="username">
                        <view>
                            {{ data.deptname }}
                        </view>
                    </view>
                    <view class="dianping">
                        <uv-tags v-if="!Number(data.isstudy)" :text="$t('未学习')" size="mini" bgColor="#f9ae3d"
                            borderColor="#f9ae3d" color="#ffffff"></uv-tags>
                        <uv-tags v-else :text="$t('已学习')" size="mini" bgColor="#EEEEEE" borderColor="#EEEEEE"
                            color="#999999"></uv-tags>

                    </view>
                </view>
            </view>
        </view>
        <view class="datacontext" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="font-w">{{ $t('推荐理由') }}</view>
            <view>
                {{ data.casecontext }}
            </view>
        </view>
        <view class="datacontext" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="font-w">{{ $t('评论内容') }}</view>
            <view>
                {{ data.content }}
            </view>
        </view>
        <view class="data-poiName" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="left">{{ $t('评分') }}</view>
            <view class="right">
                <uv-rate readonly gutter="1" active-color="#FD754C" allowHalf v-model="data.accurateScore"></uv-rate>
                <view>{{ data.accurateScore }}{{ $t('星') }}</view>
            </view>
        </view>
        <view class="data-poiName" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="left">{{ $t('鉴定') }}</view>
            <view class="right">
                <view v-if="data.isbad">
                    <uv-button :custom-style="miniButton" color="#748ee2">{{
            '无需关注' }}</uv-button>
                </view>
                <view v-if="data.isbadreversal">
                    <uv-button :custom-style="miniButton" color="#748ee2">{{
            '差评翻转' }}</uv-button>
                </view>
                <view v-for="(v, e) in  label" :key="e">
                    <uv-button :custom-style="miniButton" color="#748ee2">{{ v }}</uv-button>
                </view>
            </view>
        </view>
        <view class="data-poiName" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="left">{{ $t('时间') }}</view>
            <view class="right">{{ dayjs(data.casetime).format('YYYY-MM-DD HH:mm:ss') }}</view>
        </view>
        <view class="data-poiName" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="left">{{ $t('处理人') }}</view>
            <view class="right">{{ data.resultusername }}</view>
        </view>
        <view class="data-poiName" @click="_clickcontent(data, !!Number(data.isstudy))">
            <view class="left">{{ $t('处理结果') }}</view>
            <view class="right">{{ data.state }}</view>
        </view>
        <uv-button shape="circle" :customStyle="submitButton" v-if="!Number(data.isstudy)"
            @click="_clickcontent(data, !!Number(data.isstudy))"> {{
            $t('去学习') }}</uv-button>
    </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { computed, type StyleValue } from 'vue';
import { submitButton } from '@/util/style';
import api from '@/api';
const p = withDefaults(defineProps<{ data: Eps.BaseUserCommentEntity, clickcontent?: (e: Eps.BaseUserCommentEntity) => void, identifylabel: Eps.identifylabelEntity[], clickpoiName?: (e: Eps.BaseUserCommentEntity) => void, clickuserAvatar?: (e: Eps.BaseUserCommentEntity) => void }>(), {
    clickcontent: () => { },
    clickpoiName: () => { },
    clickuserAvatar: () => {

    },
    identifylabel: () => []
})

const label = computed(() => {
    return (p.data?.identifylabelids || []).map((v: string) => {
        return p.identifylabel.find(e => e.id ==
            v)?.name
    }).filter((c: string) => c)
})

const miniButton: StyleValue = {
    height: '22px',
    fontSize: '24rpx',
    textAlign: 'center',
    lineHeight: '22px',
    padding: '0 10px',
}

async function _clickcontent(e: Eps.BaseUserCommentEntity, isstudy: boolean) {
    if (!isstudy) {
        await api('/wechat/casecomment/study', { id: e.id })
    }
    p.clickcontent(e)
}
wx.showShareMenu({
    withShareTicket: true,
})
</script>

<style scoped lang="scss">
.commentitem {
    background-color: $uni-text-color-inverse;
    display: flex;
    flex-direction: column;
    gap: 18rpx;
    align-items: center;
    padding: 32rpx;

    .header {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        width: 100%;

        .header_right {
            flex: 1;

            .top {
                height: 43rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                font-weight: 600;

                .username {
                    font-weight: 600;
                    color: rgba(51, 51, 51, 1);
                    display: flex;
                    flex-wrap: wrap;
                }


                .dianping {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 12rpx;
                }
            }



        }
    }

    .datacontext {
        color: #666666;
        line-height: 40rpx;
        width: 100%;
        font-size: 28rpx;

        .font-w {
            font-weight: 600;
            color: #000000;

        }
    }


    .data-poiName {
        color: #666666;
        font-size: 28rpx;
        line-height: 40rpx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .left {
            width: 115rpx;
            text-align: justify;
            text-align-last: justify;
            color: #000000;

        }

        .right {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            gap: 12rpx;
            align-items: center;
        }
    }

}
</style>